<template>
  <div class="recommen">
    <!-- 轮播图 -->
    <el-carousel
      class="recommen_carousel"
      :interval="4000"
      type="card"
      height="250px"
    >
      <el-carousel-item v-for="(item, index) in imageUrl" :key="index">
        <img :src="item.imageUrl" alt="" />
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐歌单 -->
    <div class="rec_songs">
      <div class="rec_song_font">
        <span>推荐歌单</span>
        <span>更多></span>
      </div>
      <div class="rec_song_detail">
        <div
          class="rec_song_image"
          v-for="(item, index) in songsForm"
          :key="index"
          @click="goSongsDetail(item.id)"
        >
          <span class="playCount">{{ handle_playConunt(item.playCount) }}</span>
          <img :src="item.picUrl" alt="" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getSongsForm } from "@/api/index";
export default {
  name: "Recommendation",
  data() {
    return {
      imageUrl: [],
      songsForm: [],
    };
  },
  methods: {
    // 轮播图的ajax
    async ajaxBanner() {
      const { data: res } = await getBanner();
      if (res.code === 200) {
        // console.log(res);
        this.imageUrl = res.banners;
      } else {
        console.log(`状态码为${res.code}`);
      }
    },

    // 推荐歌单的ajax
    async ajaxSongsForm() {
      const { data: res } = await getSongsForm();
      // console.log(res);
      this.songsForm = res.result;
    },

    // 播放数量单位换算为 万
    handle_playConunt(value) {
      if (value > 10000) return parseInt(value / 10000) + "万";
      else return value;
    },

    // 跳转歌单详情路由
    goSongsDetail(id){
      this.$router.push({path:`/songDetail/songList?id=${id}`})
      sessionStorage.setItem('SONGFORMID',id)
    }
  },
  mounted() {
    this.ajaxBanner();
    this.ajaxSongsForm();
  },
};
</script>

<style scoped lang="less">
.recommen_carousel {
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}

// 推荐歌单
.rec_songs {
  width: 100%;
  .rec_song_font {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(100, 98, 98);
    span {
      padding: 7px;
    }
  }

  // 歌单详细
  .rec_song_detail {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .rec_song_image {
      position: relative;
      width: 18%;
      margin: 10px;
      // 鼠标移入变成小手
      cursor: pointer;
      .playCount {
        position: absolute;
        right: 0;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 100%;
      }
    }
  }
}
</style>